import React, {Fragment, useEffect, useState} from 'react';
import { Image, Pagination, Row, Col, Input, Select, DatePicker,Card, Typography } from "antd";
import dayjs from "dayjs"

import { type RespDataType, type RequestDataType, getImageList } from "./api"

interface FilterProps{
    fetchImageList?: (params?: RequestDataType.GetImageListParams) => void;
}

const EnumShopList = [
    {label: "33店", value: "020138"},
    {label: "47店", value: "020161"},
    {label: "13店", value: "020113"},
    {label: "23店", value: "020127"},
    {label: "40店", value: "020146"},
    {label: "77店", value: "020177"},
    {label: "16店", value: "020116"},
    {label: "91店", value: "0201109"},
];

const EnumStatusList = [
    {label: "上锅", value: "0"},
    {label: "第一托盘菜", value: "1"},
    {label: "收台开始", value: "2"},
    {label: "收台结束", value: "3"},
    {label: "蓝色毛巾", value: "4"},
    {label: "黄色毛巾", value: "5"},
    {label: "白色毛巾", value: "6"},
];

const Filter: React.FC<FilterProps> = ({fetchImageList}) => {
    const {  filter, updateFilter } = useFilter({fetchImageList});

    return <div className="overflow-hidden">
        <Row align="middle" gutter={5} style={{marginBottom: 5}}>
            <Col>门店:</Col>
            <Col span={4}>
                <Select
                    style={{width: "100%"}}
                    value={filter.shopId}
                    options={EnumShopList}
                    onChange={(value, option) => {
                        const data = {shopId:value}
                        updateFilter(data);
                        fetchImageList({...filter, ...data})
                    }}
                />
            </Col>
            <Col>订单号:</Col>
            <Col span={3}>
                <Input
                    value={filter.orderId}
                    onChange={(e) => updateFilter({orderId: e.target.value})}
                    onKeyDown={(e) => {
                        if(e.code.toLowerCase() === "enter") {
                            fetchImageList(filter)
                        }
                    }}
                />
            </Col>
            <Col>桌号:</Col>
            <Col span={2}>
                <Input
                    value={filter.tableNum}
                    onChange={(e) => updateFilter({tableNum: e.target.value})}
                    onKeyDown={(e) => {
                        if(e.code.toLowerCase() === "enter") {
                            fetchImageList(filter)
                        }
                    }}
                />
            </Col>
            <Col>日期:</Col>
            <Col>
                <DatePicker
                    value={dayjs(filter.aiTime*1000)}
                    disabledDate={(date) =>date.isAfter(dayjs())}
                    onChange={(date) => {
                        const data = {aiTime:date.startOf('day').unix()}
                        updateFilter(data);
                        fetchImageList({...filter, ...data})
                    }}
                />
            </Col>
            <Col>状态:</Col>
            <Col span={8}>
                <Select
                    maxTagCount="responsive"
                    style={{width:"100%"}}
                    mode="multiple"
                    options={EnumStatusList}
                    value={filter.status ? filter.status.split(","): []}
                    onChange={(value) => {
                        const data = {status: value.join(",")};
                        updateFilter(data);
                        fetchImageList({...filter, ...data})
                    }}
                />
            </Col>
        </Row>
    </div>
}

export default Filter;

const useFilter = ({ fetchImageList }:FilterProps) => {
    const [ filter, setFilter ] = useState<RequestDataType.GetImageListParams>({
        shopId: EnumShopList[0].value,
        orderId: "",
        tableNum: "",
        aiTime: dayjs().startOf('day').unix(),
        status: ""
    });

    useEffect(() => {
        fetchImageList(filter)
    }, [])

    const updateFilter = (newFilter: RequestDataType.GetImageListParams) => {
        setFilter({...filter, ...newFilter})
    }

    return { filter, updateFilter }
}